<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
</head>
    <body>
        <div id="app">
            <input-number :max="100" :min="0" v-model="value" @update-value="updateValue"></input-number>
            <p>{{ value }}</p>

        </div>

        <template id="input-template">
            <div>
                <button @click="sub">-</button>
                <input type="number" v-model="value" @input="modify">
                <button @click="add">+</button>
            </div>
        </template>

        <script>
            // 数字输入框组件
            Vue.component(
                "input-number", {
                    template: "#input-template",
                    // 在子组件中定义要接收的参数与格式
                    props: {
                        max: {
                            type: Number,
                            default: Infinity
                        },
                        min: {
                            type: Number,
                            default: -Infinity
                        },
                        value: {
                            type: Number,
                            default: 0
                        }
                    },
                    // 存储父组件传递过来的值，便于在子组件中进行修改
                    data() {
                        return {
                            currentValue: this.value
                        }
                    },
                    methods: {
                        sub() {
                            this.$emit("update-value", this.value-1)
                        },
                        add() {
                            this.$emit("update-value", this.value+1)
                        },
                        modify(even) {
                            // even.target.value获取的都是String类型，需要我们强转为Number类型
                            this.$emit("update-value", Number(even.target.value))
                        }
                    },
                    watch: {
                        // 不仅自己修改，父组件也修改
                        value(newVal) {
                            if (newVal > this.max) {
                                this.$emit("update-value", this.max);
                            } else if (newVal < this.min) {
                                this.$emit("update-value", this.min);
                            } else {
                                this.$emit("update-value", newVal);
                            }
                        }
                    }
                }
            )
            new Vue({
                el: "#app",
                data: {
                    value: 1
                },
                methods: {
                    updateValue(val) {
                        this.value = val
                    },
                }
            })
        </script>
    </body>
</html>